<template>
  <div>
    <div class="material" v-if="!materialAddShow">
      <!-- 筛选按钮 -->
      <div class="search-button">
        <el-button
            v-hasPermi="['system:productEstimate:query']"
            class="btn search"
            @click="getMaterialList"
        ><el-icon class="icon" color="#fff"> <Search /> </el-icon
        >查询</el-button
        >
        <el-button class="btn add" @click="handleRefresh"
          ><el-icon class="icon" color="#fff"> <Refresh /> </el-icon
          >重置</el-button
        >
        <el-popover :width="170" trigger="click" placement="bottom">
          <template #reference>
            <el-button class="btn search" style="width: 100px"
              ><el-icon class="icon" color="#fff"> <Setting /> </el-icon
              >显示列</el-button
            >
          </template>
          <el-checkbox-group v-model="checkList" @change="handleCheckChange">
            <div>
              <el-checkbox label="materialName">物料简称</el-checkbox>
            </div>
            <div>
              <el-checkbox label="materialCode">物料编号</el-checkbox>
            </div>
            <div>
              <el-checkbox label="categoryName">物料分类</el-checkbox>
            </div>
            <div>
              <el-checkbox label="materialUnitName">物料单位</el-checkbox>
            </div>
            <div>
              <el-checkbox label="firstPurchaseTime">首次采购时间</el-checkbox>
            </div>
            <div>
              <el-checkbox label="supplierName">供应商</el-checkbox>
            </div>
            <div>
              <el-checkbox label="manufactureName">生产厂家</el-checkbox>
            </div>

            <div>
              <el-checkbox label="cnt">已测试次数</el-checkbox>
            </div>
           
            
          </el-checkbox-group>
        </el-popover>
      </div>
      <!-- 筛选条件 -->
      <div class="search">
        <div class="search-item">
          <el-input
              clearable
              width="260px"
              v-model.trim="params.name"
              class="search-input"
              maxlength="30"
              placeholder="请输入物料简称/编号/供应商/生产厂家"
          ></el-input>
        </div>
      </div>
      <div class="material-container">
        <!--分类数据-->
        <div class="class-container">
          <div class="class-top">
            <el-input
                v-model.trim="className"
                placeholder="搜索分类"
                clearable
                class="class-input"
            />
          </div>
          <div class="head-container">
            <el-tree
                :data="classOptions"
                :props="{ label: 'categoryName', children: 'children' }"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="deptTreeRef"
                node-key="id"
                :highlight-current="true"
                default-expand-all
                @node-click="handleNodeClick"
            >
              <template #default="{ node, data }">
                <span
                    class="span-ellipsis"
                    :title="node.label.length > 18 ? node.label : ''"
                >{{ node.label }}
                  <el-icon
                      v-if="data.importantDevice == 1"
                      style="margin-left: 5px; transform: translateY(2px)"
                      title="贵重设备"
                      color="#FF9552"
                      :size="15"
                  >
                    <Box />
                  </el-icon>
                </span>
              </template>
            </el-tree>
          </div>
        </div>
        <div style="width: 85%">
          <!-- 表格数据 -->
          <el-table
              v-loading="loading"
              :data="materialList"
              border
              height="64vh"
              :header-cell-style="{ 'text-align': 'center' }"
              @sort-change="sortChange"
          >
            <!-- 操作模式 -->
            <el-table-column
                label="操作"
                :show-overflow-tooltip="true"
                width="140px"
            >
              <template #default="{ row }">
                <div class="table-operate">
                  <el-icon
                      v-hasPermi="['system:productEstimate:detail']"
                      title="查看"
                      color="#007CEF"
                      class="table-icon"
                      :size="20"
                      @click="handleOperate('detail', row)"
                  >
                    <Document />
                  </el-icon>
                  <el-icon
                      v-hasPermi="['system:productEstimate:allocation']"
                      title="分配"
                      color="#007CEF"
                      class="table-icon"
                      :size="20"
                      @click="handleOperate('allocation', row)"
                  >
                    <img
                        src="@/assets/icons/images/allot.png"
                        style="width: 17px; height: 17px"
                    />
                  </el-icon>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                type="index"
                label="序号"
                :index="indexMethod"
                width="70"
                align="center"
            />
            <el-table-column
                v-if="checkList.includes('materialName')"
                label="物料简称"
                prop="materialName"
                :show-overflow-tooltip="true"
                min-width="180"
                sortable="custom"
            >
              <template #default="{ row }">
                <span class="ellipsisStyle">{{
                    row.materialName ? row.materialName : "--"
                  }}</span>
              </template>
            </el-table-column>
            <el-table-column
                v-if="checkList.includes('materialCode')"
                label="物料编号"
                prop="materialCode"
                :show-overflow-tooltip="true"
                min-width="120"
                sortable="custom"
            >
              <template #default="{ row }">
                <span>{{ row.materialCode ? row.materialCode : "--" }}</span>
              </template>
            </el-table-column>
            <el-table-column
                label="物料分类"
                prop="categoryName"
                :show-overflow-tooltip="true"
                min-width="120"
                v-if="checkList.includes('categoryName')"
                sortable="custom"
            />
            <el-table-column
                label="物料单位"
                prop="materialUnitName"
                :show-overflow-tooltip="true"
                min-width="120"
                v-if="checkList.includes('materialUnitName')"
                sortable="custom"
            />
            <el-table-column
                label="首次采购时间"
                prop="firstPurchaseTime"
                :show-overflow-tooltip="true"
                min-width="150"
                v-if="checkList.includes('firstPurchaseTime')"
                sortable="custom"
            />
            <el-table-column
                label="供应商"
                prop="supplierName" v-if="checkList.includes('supplierName ,9o')"
                :show-overflow-tooltip="true"
                min-width="200"
                sortable="custom"
            >
              <template #default="{ row }">
                <span class="ellipsisStyle">{{
                    row.supplierName ? row.supplierName : "--"
                  }}</span>
              </template>
            </el-table-column>
            <el-table-column
                label="生产厂家"
                prop="manufactureName" v-if="checkList.includes('manufactureName')"
                :show-overflow-tooltip="true"
                min-width="200"
                sortable="custom"
            >
              <template #default="{ row }">
                <span class="ellipsisStyle">{{
                    row.manufactureName ? row.manufactureName : "--"
                  }}</span>
              </template>
            </el-table-column>
            <el-table-column
                label="已测试次数"
                prop="cnt" v-if="checkList.includes('cnt')"
                :show-overflow-tooltip="true"
                min-width="150"
                sortable="custom"
            />
          </el-table>
        </div>
      </div>
      <!-- 分页 -->
      <pagination
          class="pagination"
          :total="total"
          v-model:page="params.pageNum"
          v-model:limit="params.pageSize"
          @pagination="getMaterialList"
      />
    </div>
    <ProductEstimatedetail
        v-if="materialAddShow"
        ref="productRef"
        @updateFollowAddShow="materialAddShow = false"
    />

    <!--  分配  -->
    <el-dialog
        :title="'任务分配'"
        v-model="taskAllocationShow"
        width="860px"
        append-to-body
    >
      <div class="project-info" style="min-height:400px;">
        <el-form
            :model="projectForm"
            ref="projectFormRef"
            :rules="queryRules"
            label-width="120px"
            v-enterToNext
        >
          <el-row>
            <el-col :span="12">
              <el-form-item
                  label="计划开始时间："
                  prop="startTime"
                  label-width="120"

              >
                <el-date-picker
                
                    v-model="projectForm.startTime"
                    type="date"
                    placeholder="请选择"
                   format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    @change="handleTimeChange(1)"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                  label="计划结束时间："
                  prop="endTime"
                  label-width="120"
              >
                <el-date-picker
                    v-model="projectForm.endTime"
                    type="date"
                    placeholder="请选择"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    @change="handleTimeChange(2)"
                    :default-time="new Date(2000, 1, 1, 23, 59, 59)"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="责任人员：" prop="userList">
                <el-select
                    filterable
                    style="width: 100%;height:100%"
                    v-model="projectForm.userList"
                    multiple
                    placeholder="请选择"
                    clearable
                    @change="userListChange"
                    class="search-input"

                >
                  <el-option key="0" label="" value="" disabled>
                    <span style="float: left; color: #8492a6">人员姓名</span>
                    <span style="margin: 0 80px 0 50px; color: #8492a6"
                    >联系方式</span
                    >
                    <span
                        style="
                          margin: 0 100px 0 0px;
                          color: #8492a6;
                          font-size: 13px;
                        "
                    >职位</span
                    >
                    <span style="color: #8492a6; font-size: 13px">部门</span>
                  </el-option>
                  <el-option
                      v-for="item in userList"
                      :key="item.userId"
                      :label="item.nickName"
                      :value="item.userId"
                  >
                      <span
                          style="display: inline-block; width: 80px; float: left"
                      >{{ item.nickName }}</span
                      >
                    <span
                        style="
                          display: inline-block;
                          width: 125px;
                          margin: 0 15px 0 23px;
                          color: #8492a6;
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                    >{{ item.phonenumber ? item.phonenumber : "--" }}</span
                    >
                    <span
                        style="
                          display: inline-block;
                          width: 125px;
                          font-size: 13px;
                          margin: 0 0px 0 0px;
                          transform: translateY(-11px);
                          color: #8492a6;
                        "
                    >
                        {{ item.postName ? item.postName : "--" }}
                      </span>
                    <span
                        style="
                          display: inline-block;
                          margin: 0 0px 0 0px;
                          font-size: 13px;
                          transform: translateY(-11px);
                          color: #8492a6;
                        "
                    >
                        {{ item.fullDeptName ? item.fullDeptName : "--" }}
                      </span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div v-if="personnelTableVisible">
            <el-table
                v-loading="loading"
                :data="allocationList"
                border
                height="50vh"
                width="100%"
                style="margin-bottom: 10px"
                :header-cell-style="{ 'text-align': 'center' }"
            >
              <el-table-column
                  label="姓名"
                  prop="userName"
                  align="center"
              />
              <el-table-column
                  label="待开始任务"
                  prop="cnt0"
                  align="center"
              />
              <el-table-column
                  label="进行中任务"
                  prop="cnt1"
                  align="center"
              />
              <el-table-column
                  label="已逾期任务"
                  prop="cnt2"
                  align="center"
              />
              <el-table-column
                  label="操作"
                  :index="indexMethod"
                  align="center"
              >
                <template #default="{ row, $index }">
                  <el-icon
                      title="查看详情"
                      color="#007CEF"
                      class="table-icon"
                      :size="20"
                      @click="handlePersonTable('detail', row)"
                  >
                    <Document />
                  </el-icon>
                  <el-icon
                      title="删除"
                      color="#E33838"
                      class="table-icon"
                      :size="20"
                      @click="handlePersonTable('delete', row, $index)"
                  >
                    <Delete />
                  </el-icon>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-row>
            <el-col :span="24">
              <el-form-item
                  label="任务内容："
                  prop="remark"
                  label-width="120"
              >
                <el-input
                    v-model="projectForm.remark"
                    type="textarea"
                    maxlength="500"
                    placeholder="请填写"
                    show-word-limit
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button
              style="color: #fff; background-color: rgba(67, 207, 124, 1)"
              @click="allocationCheck(projectFormRef)"
              v-loading="loadingCheck"
          >保存</el-button
          >
          <el-button style="background-color: #fff" @click="clearAllocation"
          >取 消</el-button
          >
        </div>
      </template>
    </el-dialog>
    <!--  个人任务  -->
    <el-dialog
        :title="'个人任务'"
        v-model="personalTasksShow"
        width="800px"
        append-to-body
    >
      <div class="task-container">
        <div class="task-container-left">
          <div>{{ infoPersonName }}</div>
          <div style="font-size: 16px;">{{ infoDeptName }}</div>
        </div>
        <div style="display: flex">
          <div
              class="personTask"
              v-for="(item, index) in personStatusList"
              :style="index === 0 ? 'background: rgb(240,248,244)' : index === 1 ? 'background: rgb(240,250,254)' : 'background: rgb(254,235,227)'">
            <span class="task-label">{{ item.label }}</span>
            <span class="task-number" :style="index == 0 ? 'color: green' : index == 1 ? 'color: blue' : 'color: red'">{{ item.number }}</span>
            <span class="task-label">个</span>
          </div>
        </div>
      </div>
      <div class="task-table">
        <div class="task-table-card" v-for="item in taskProjectList">
          <div class="task-content task-border" style="margin-top:0px;">
            <div class="task-border">
              <span>【{{ item.missionStatusName }}】</span>&nbsp;&nbsp;
              <span>{{ item.projectName }}</span>
            </div>
            <div class="timeConflict" v-if="item.status && item.missionTypeStatusName != '已完成'">时间段冲突</div>
          </div>
          <div class="task-content task-border">
            <div>
              <span>项目类型：</span>
              <span>{{ item.missionTypeName || '--' }}</span>
            </div>
            <div>
              <span>任务状态：</span>
              <span>{{ item.missionTypeStatusName }}</span>
            </div>
          </div>
          <div class="task-content task-border">
            <div>
              <span>计划开始时间：</span>
              <span>{{ item.startTime }}</span>
            </div>
            <div>
              <span>计划结束时间：</span>
              <span>{{ item.endTime }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>


  </div>
</template>

<script setup>
import { Picture as IconPicture } from "@element-plus/icons-vue";
// import MaterialAdd from "./materialAdd";
const { proxy } = getCurrentInstance();
import { getDictsApi } from "@/api/dict";
import { getMaterialClassListApi } from "@/api/information/materialClass";
import { getMaterialTestListApi } from "@/api/information/material";
import { addTableHeaderApi, getTableHeaderApi } from "@/api/pub";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getWorkApplyListApi,
  getWorkOrderAffirmApi,
  getWorkOrderBackApi,
  getUserListApi
} from "@/api/operation/work";
import { allotListApi, orderCntApi, getOrderCntDtlApi } from "@/api/operation/productEstimate"
import ProductEstimatedetail from "@/views/operation/productEstimate/productEstimatedetail.vue";
// 搜索参数
const params = reactive({
  categoryId: null,
  name: "",
  pageNum: 1,
  pageSize: 50,
});
const checkList = ref([
  "materialCode",
  "materialName",
  "importantDevice",
  "factoryCode",
  "technologyParameter",
  "materialUnitName",
  "categoryName",
  "stockTypeName",
  "warningNumber",
  "distributorName",
  "productionName",
  "firstPurchaseTime",
  "supplierName",
  "manufactureName",
  "cnt",
]);

// 任务分配弹窗
const taskAllocationShow = ref(false);
// 表格加载效果
const loading = ref(false);
// 物料新增组件显隐
const materialAddShow = ref(false);
// 物料列表
const materialList = ref([]);
// 总数
const total = ref(0);
// 分类名称
const className = ref("");
// 物料新增组件引用
const materialAddRef = ref(null);
// 操作类型
const pageType = ref("");
// 存货类型列表
const stockTypeList = ref([]);
// 分类列表
const classOptions = ref(undefined);
//默认选中
const deptTreeRef = ref(null);
const productRef = ref();
// 责任人员下拉列表
const userList = ref([]);
const personStatusList = ref([])
const taskProjectList = ref([])
// 任务分配对象
const projectForm = ref({
  startTime: "",
  endTime: "",
  userList: [],
  remark: ''
});
const queryRules = ref({
  startTime: [
    { required: true, message: "请选择计划开始时间", trigger: "blur" },
  ],
  endTime: [
    { required: true, message: "请选择计划结束时间", trigger: "blur" },
  ],
  userList: [
    { required: true, message: "请选择责任人员", trigger: "blur" },
  ]
})
// 选择责任人员显示的表格
const personnelTableVisible = ref(false);
const personalTasksShow = ref(false);
// 任务分配表单ref
const projectFormRef = ref();
// 任务分配表单
const allocationList = ref([]);

/**
 * @description: 复选框选中
 */
const handleCheckChange = async (val) => {
  var str = val.join(",");
  const result = await addTableHeaderApi({
    moduleType: 62,
    titleField: str,
  });
  // getTableHeader();
};

/**
 * @description: 获取表头
 */
const getTableHeader = async () => {
  const result = await getTableHeaderApi({
    moduleType: 62,
  });
  if (result.code == 200 && result.data.titleField) {
    var arr = result.data.titleField.split(",");
    checkList.value = arr;
  }
};

/**
 * @description: 获取物料列表
 */
const getMaterialList = async () => {
  try {
    loading.value = true;
    let { pageNum, pageSize } = params;
    console.log("params", params)
    const res = await getMaterialTestListApi({ pageNum, pageSize }, params);
    materialList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  } catch {
    loading.value = false;
  }
};

/*
* 根据责任人筛选查询表格
* */
const userListChange = (value) => {
  if (value.length > 0) {
    personnelTableVisible.value = true;
    let params = {
      userIds: value
    }
    orderCntApi(params).then(res => {
      if (res) {
        allocationList.value = res
      }
    })
  }else {
    personnelTableVisible.value = false;
  }
}

/**
 * @description: 处理时间变更
 */
 const handleTimeChange = (flag) => {
  if (projectForm.value.startTime && projectForm.value.endTime &&projectForm.value.startTime > projectForm.value.endTime) {
    ElMessage.info("计划开始时间不能大于计划结束时间！");
    if (flag == 1) {
      projectForm.value.startTime = "";
    } else {
      projectForm.value.endTime = "";
    }
  }
};


/*
*
* 时间戳转换*/
const nowDate = (now) => {
  const date = new Date(now)
  const time = date.getTime() // 精确到毫秒
  return time;
}

/*
* 责任人员表格操作按钮
* */
let infoPerson = null;
let infoPersonName = "";
let infoDeptName = "";
const handlePersonTable = (type, row, index) => {
  switch (type) {
    case 'detail':
      infoPerson = row;
      personalTasksShow.value = true;
      personStatusList.value = [
        {
          label: '待开始',
          number: row.cnt0
        },
        {
          label: '进行中',
          number: row.cnt1
        },
        {
          label: '已逾期',
          number: row.cnt2
        }
      ]
      getOrderCntDtlApi({userId: row.userId }).then(res => {
        if (res) {
          taskProjectList.value = res
          infoPersonName = taskProjectList.value[0].userName;
          infoDeptName = taskProjectList.value[0].deptName;
          let startTime = null;
          let endTime = null;
          if (!!projectForm.value.startTime || !!projectForm.value.endTime) {
            startTime = nowDate(projectForm.value.startTime);
            endTime = nowDate(projectForm.value.endTime);
          }else{
            startTime = null;
            endTime = null;
          }
          taskProjectList.value.map(item => {
            let actionStatTime = nowDate(item.startTime)
            let actionEndTime = nowDate(item.endTime)
            if (!!startTime || !!endTime) {
              if (startTime >= actionStatTime && startTime <= actionEndTime) {
                item.status = true;
              }else if (endTime >= actionStatTime && startTime <= actionEndTime) {
                item.status = true;
              }
            }else {
              item.status = false;
            }
          })
        }
      })
      break;
    case 'delete':
      allocationList.value.splice(index, 1);
      projectForm.value.userList = projectForm.value.userList.filter(item => item != row.userId)
      break;
    default:
      break;
  }
}



/**
 * @description: 列表排序
 * @param {*} column.prop //当前排序取的字段
 * @param {*} column.order // "desc" "asc" 正序或倒序
 */
const sortChange = (column) => {
  params.sortField = column.prop;
  if (column.order === "descending") {
    params.sortOrder = "DESC"; // 排序或倒序
  } else {
    params.sortOrder = "ASC"; // 排序或倒序
  }
  getMaterialList();
};



/**
 * @description: 重置
 */
const handleRefresh = () => {
  Object.assign(params, {
    categoryId: null,
    name: "",
    pageNum: 1,
    pageSize: 50,
  });
  getMaterialList()
};

/**
 * @description: 获取分类列表
 */
const getMaterialClassList = async () => {
  const res = await getMaterialClassListApi({ pageNum: 1, pageSize: 50 });
  let obj = [
    {
      categoryId: 0,
      categoryName: "全部",
      parentId: null,
      children: [],
      id: 0,
    },
  ];
  res.rows.forEach((item) => {
    item.id = item.categoryId;
  });
  let treeData = proxy.handleTree(res.rows, "id");
  obj[0].children.push(...treeData);
  classOptions.value = obj;
  // 设置默认选中的节点的 key 值
  setTimeout(() => {
    deptTreeRef.value.setCurrentKey(0);
  }, 0);
};



/**
 * @description: 通过条件过滤节点
 * @param {String} value 分类名称
 * @param {Object} data 数据源
 *
 */
const filterNode = (value, data, node) => {
  //保留有关键字的
  // if (!value) return true;
  // return data.categoryName.indexOf(value) !== -1;

  //保留搜索到的父级和子级
  if (!value) return true;
  let _array = []; //这里使用数组存储 只是为了存储值。
  getReturnNode(node, _array, value);
  let result = false;
  _array.forEach((item) => {
    result = result || item;
  });
  return result;
};

const getReturnNode = (node, _array, value) => {
  let isPass =
      node.data &&
      node.data.categoryName &&
      node.data.categoryName.indexOf(value) !== -1;
  isPass ? _array.push(isPass) : "";
  if (!isPass && node.level != 1 && node.parent) {
    getReturnNode(node.parent, _array, value);
  }
};
/**
 * @description: 监听分类名称
 * @param {String} val 变更后分类名称
 */
watch(className, (val) => {
  proxy.$refs["deptTreeRef"].filter(val);
});

/**
 * @description: 节点单击事件
 * @param {Object} data 数据源
 */
function handleNodeClick(data) {
  if (!data.id) {
    params.categoryId = null;
  } else {
    params.categoryId = data.id;
  }
  getMaterialList();
}

/**
 * @description: 预览照片
 * @param {String} img 图片地址
 */
const showImg = (img) => {
  let imgArr = [];
  imgArr.push(img);
  return imgArr;
};

/**
 * @description: 表格操作
 * @param {String} type 类型
 * @param {Object} row  当前行数据
 */
var allocationObj = null; // 点击获取的列表信息
const handleOperate = async (type, row) => {
  switch (type) {
    case "detail":
      materialAddShow.value = true;
      pageType.value = "detail";
      nextTick(() => {
        productRef.value.handleDetailInfo(row.materialId);
      });
      break;
    case "allocation":
      taskAllocationShow.value = true;
      allocationObj = row;
      break;
    default:
      break;
  }
};

/*
* 任务分配表单提交
* */
const allocationCheck = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let params = {
        ...projectForm.value,
        id: allocationObj.materialId
      }
      allotListApi(params).then(res => {
        if (res.code === 200) {
          clearAllocation();
          getMaterialList();
          ElMessage.success("操作成功");
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

/**
 * @description: 获取用户列表
 */
const getUserList = async () => {
  await getUserListApi(2).then((res) => {
    if (res) {
      userList.value = res;
    }
  });
};

/*
* 任务分配取消
* */
const clearAllocation = () => {
  taskAllocationShow.value = false;
  projectForm.value = {
    startTime: "",
    endTime: "",
    userList: [],
    remark: ''
  }
  allocationList.value = [];
  personnelTableVisible.value = false;
}

/**
 * @description: 获取字典
 */
async function getDicts() {
  // 存货类型
  // await getDictsApi("stock_type").then((res) => {
  //   if (res.code === 200) {
  //     stockTypeList.value = res.data;
  //   }
  // });
}

/**
 * @description: 序号
 * @param {Number} index 索引
 */
function indexMethod(index) {
  const currentPage = params.pageNum;
  const pageSize = params.pageSize;
  const truelndex = (currentPage - 1) * pageSize + index + 1;
  return truelndex;
}

onMounted(() => {
  getTableHeader();
  getMaterialList();
  getMaterialClassList();
  getUserList();
});
</script>
<style>
@import "@/assets/styles/confirmBtn.css";
</style>
<style lang="scss" scoped>
.material {
  padding: 20px 20px;
  width: 100%;
  height: 100%;

  .material-container {
    display: flex;

    .class-container {
      width: 240px;
      margin-right: 10px;
      padding-top: 30px;
      background: #ffffff;
      box-shadow: 0px 0px 10px 0px rgba(26, 43, 26, 0.1);
      border-radius: 2px;
      overflow: auto;
      .class-top {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
        .class-input {
          width: 180px;
        }
      }
    }
    .span-ellipsis {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .pagination {
    margin: 20px auto;
  }
  :deep(.el-table) {
    .el-table__cell {
      padding: 0;
      height: 40px;
    }
    .cell.el-tooltip {
      display: flex;
      align-items: center;
    }
  }

  .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 30px;
  }
  .image-slot .el-icon {
    font-size: 30px;
  }

  .search-input{
    width: 260px;
  }
}
.task-container{
  width: 100%;
  //border: 1px red solid;
  display: flex;
  justify-content: space-between;
  .task-container-left{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    div:first-child{
      font-weight: 600;
      font-size: 24px;
      color: black;
    }
  }
}
.task-table{
  width: 100%;
  height: 61vh;
  overflow: hidden;
  overflow-y: scroll;
  margin-top: 20px;
  .task-table-card{
    width: 100%;
    height: 185px;
    border: 1px rgb(215, 215, 215) solid;
    border-radius: 10px;
    padding: 0px 15px;
    font-size: 15px;
    margin-bottom: 20px;
    .task-border{
      margin-top: 30px;
    }
    .task-content{
      display: flex;
      justify-content: space-between;
    }
    .timeConflict{
      margin-top:20px;
      width: 120px;
      height: 45px;
      color: rgb(247, 98, 128);
      background: rgb(254, 244, 231);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.personTask{
  width: 140px;
  height: 110px;
  border-radius: 10px;
  margin: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;

  .task-label{
    font-size: 16px;
    color: black;
  }

  .task-number{
    font-size: 20px;
    font-weight: 700;
  }
}
</style>
